<style lang="scss" scoped>
  @import "../../utils/base.scss";

  .step_wait {
    display: block;
    width: 26px;
    height: 26px;
    line-height: 24px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 50%;
    font-size: 14px;
    transition: background-color 0.2s ease-in-out;
    border-color: #2d8cf0;
    background-color: #2d8cf0;
  }

  .step_wait1 {
    display: block;
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 50%;
    font-size: 14px;
    transition: background-color 0.2s ease-in-out;
    border-color: #2d8cf0;
    background-color: white;
  }

  .ivu-steps-item.ivu-steps-custom .ivu-steps-head-inner>.ivu-steps-icon {
    top: 0px;
  }
</style>

<template>
  <div>
    <div class="step_3" style="padding: 20px 20px 0px 20px;  margin-bottom: 20px; height: 50px;">
      <Steps :current="stepTitle.length">
        <Step v-for="(item,index) in stepTitle" :key="index">
          <template slot="icon">
            <template v-if="index != stepTitleId">
              <div class="step_wait1"><span style="color: #2d8cf0;">{{index+1}}</span></div>
            </template>
            <div v-else class="step_wait"><span style="color: white;">{{index+1}}</span></div>
          </template>
          <template slot="title">
            <a href="javascript:void(0)" class="a" @click="chlickStep(item.id)"
              style="padding-left: 5px;"><span>{{item.name}}</span></a>
          </template>
        </Step>
      </Steps>
    </div>
    <div class="qheader" :style="{borderBottom: ishidden ? '0px solid #dcdae2;' : '1px solid #dcdae2', height: '0px'}">
    </div>
    <div :style="{overflow: !ishidden ? 'auto': 'hidden', height:!ishidden ? 'calc(100vh - 216px)':'' }" ref="entry">
      <slot name="content"></slot>
      <div style="text-align: center;padding-top: 20px;padding-bottom: 20px">
        <Button v-show="stepTitleId != 0" type="primary" @click="upStep">上一步</Button>
        <Button v-show="stepTitleId != stepTitle.length-1" type="primary" @click="nextStep">下一步</Button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    created: function() {
    },
    mounted:function(){
    },
    methods: {
      
      // 上一步
      upStep() {
        if (this.stepTitleId != 0) {
          //分步校验
          if (this.$parent.setApplInfo(this.stepTitleId)) {
            this.$refs.entry.scrollTop = 0
            this.stepTitleId = this.stepTitleId - 1
          }
        }
      },
      //下一步
      nextStep() {
        if (this.stepTitleId != (this.stepTitle.length - 1)) {
          if (this.$parent.setApplInfo(this.stepTitleId)) {
            this.$refs.entry.scrollTop = 0
            this.stepTitleId = this.stepTitleId + 1
          }
        }
      },
      //选择需要编辑的步骤
      chlickStep(stepId) {
        if (this.$parent.setApplInfo(this.stepTitleId)) {
          this.$refs.entry.scrollTop = 0
          this.stepTitleId = stepId
        }
      },
    },
    props: {
      ishidden: {
        default: false
      },
      value: {
        default: 1
      },
      stepTitle: {}
    },
    computed: {
      stepTitleId: {
        get: function() {
          return this.value;
        },
        set: function(value) {
          this.$emit('input', value);
        }
      },
    },
  }
</script>
